<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户合并</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
			@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
		</style>
		<style type="text/css">
			.search{
				width: 200px;
			}
			p{
				font-weight: bold;
				line-height:35px;
				font-size: 15px;
			}
			.sucess{
				text-align: center;
			}
			#app{
				margin-left:5px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3><i class="el-icon-sort"></i>客户合并</h3>
			<br/>
			<el-row>
				<el-col :span="8">
					<p>从</p>
				</el-col>
				<el-col :span="4">
					<i class="el-icon-d-arrow-right"></i>
				</el-col>
				<el-col :span="8">
					<p>并入到</p>
				</el-col>
			</el-row>
			<br />
			<el-row>
				<el-col :span="12">
					<el-autocomplete style="width:300px" v-model.trim="customer" :fetch-suggestions="querySearchAsync"  placeholder="关键字" v-on:change="loadAll()" v-on:click="loadAll">
					 <i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-autocomplete>
					<el-button icon="el-icon-more" @click="dialogFormVisible=true"></el-button>
				</el-col>
				<el-col :span="4">
					<p></p>
				</el-col>
				<el-col :span="8">
					<el-autocomplete style="width:300px" v-model.trim="customer2" :fetch-suggestions="querySearchAsync2"  placeholder="关键字" v-on:change="loadAll2()" v-on:click="loadAll2">
					 <i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-autocomplete>
					<el-button icon="el-icon-more" @click="dialogFormVisible02=true"></el-button>
				</el-col>
			</el-row>
			<br />
			<p>注意：</p>
			<p><span style="font-weight: normal;">1.执行合并后，</span>左侧客户基本信息被删除进入回收站，其客户视图内其它数据合并入右侧客户，右侧客户保留。</p>
			<p><span style="font-weight: normal;">2.在合并前，应检查左侧客户是否有未执行完的批量任务，如有请先结束批量任务。是否有属于某项目的情况，如有则不允许被合并。</span></p>
			<p><span style="color: red;">2.合并操作不可恢复！</span><span style="font-weight: normal;">请执行前检查确认客户选择是否正确。</span></p>
			<div class="sucess">
				<el-button type="primary" @click="intelMerger">智能合并</el-button>
				<el-button type="info" @click="merger">执行合并</el-button>
			</div>
			
			
			<!-- 展示客户01的弹窗  style="width:50%" -->
			<el-dialog title="客户基本信息" :visible.sync="dialogFormVisible">
				<span>客户基本信息</span>
				<el-table border targetType="dialog" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="selsChange" @row-click="handleCurrentChange2">
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column prop="ID" label="ID"></el-table-column>
					<el-table-column prop="shortname" label="简称"></el-table-column>
					<el-table-column prop="name" label="客户名称"></el-table-column>
					</el-table-column>
			  	</el-table>
					<div slot="footer" class="dialog-footer" >
					<el-row>
					<el-col :span="20">
						<el-button type="primary" @click="executionMerger">确定</el-button>
					</el-col>
					<el-col :span="4">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
					</el-col>
					</el-row>
				</div>
				<div class="block">
                    <el-pagination @current-change="handleCurrentChange" :page-size="pagedata.pageSize" background layout="total,prev, pager, next, jumper" :total="pagedata.total">
                    </el-pagination>
                  </div>
			</el-dialog>
			
			<!-- 展示客户02的弹窗 -->
			<el-dialog title="客户基本信息" :visible.sync="dialogFormVisible02">
				<span>客户基本信息</span>
				<el-table border targetType="dialog" :data="tableData4" tooltip-effect="dark" style="width: 100%" @selection-change="selsChange02" @row-click="handleCurrentChange02">
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column prop="ID" label="ID"></el-table-column>
					<el-table-column prop="shortname" label="简称"></el-table-column>
					<el-table-column prop="name" label="客户名称"></el-table-column>
					</el-table-column>
			  	</el-table>
					<div slot="footer" class="dialog-footer">
					<el-row>
					<el-col :span="20">
						<el-button type="primary" @click="executionMerger02">确定</el-button>
					</el-col>
					<el-col :span="4">
						<el-button @click="dialogFormVisible02 = false">取 消</el-button>
					</el-col>
					</el-row>
				</div>
			  	<!-- 分页 -->
			<div class="block">
                    <el-pagination @current-change="handleCurrentChange" :page-size="pagedata.pageSize" background layout="total,prev, pager, next, jumper" :total="pagedata.total">
                    </el-pagination>
                  </div>
			</el-dialog>
			
			<!-- 智能合并弹窗-->
			  <el-dialog title="提示" :visible.sync="dialogMerger" width="30%" center>
				<div class="del-dialog-cnt">自动检测电话号码相同或者邮箱相同执行智能合并，执行后不可撤销！</div> 
					<span slot="footer" class="dialog-footer">
						<el-row>
							<el-col :span="12">
								<el-button type="primary" @click="dialogMerger = false" v-on:click="Merger">确定</el-button>
							</el-col>
							<el-col :span="8">
								<el-button @click="dialogMerger = false">取消</el-button>
							</el-col>
						</el-row>
					</span>
			</el-dialog>
			
		</div>
		
		<script type="text/javascript">
			var Main = {
				data() {
				  return {
					input1: '',
					input2: '',
					customer:'',
					customer2:'',//第二个客户
					dialogFormVisible:false,
					dialogFormVisible02:false,
					dialogMerger:false,
					tableData3:[],/*全部客户01*/
					tableData4:[],/*全部客户02*/
					pagedata:[],/*分页数据*/
					sels: [],//选中的值显示
					sels02: [],//选中的值显示
				  }
				},
				created:function () {
					var _self = this;
					$.ajax({
	                      type: "post",
	                      url: "/customer/customerPage2",
	                      data: {},
	                      success: function (sdata) {
	                    	  console.log("页数打印*****："+sdata);
	                    	  _self.tableData3=sdata.list;
	                    	  _self.tableData4=sdata.list;
	                          _self.pagedata=sdata;
	                      }
	                });
				},
				created:function () {
					var _self = this;
					$.ajax({
	                      type: "post",
	                      url: "/customer/customerPage2",
	                      data: {},
	                      success: function (sdata) {
	                    	  console.log("页数打印*****："+sdata);
	                    	  _self.tableData3=sdata.list;
	                    	  _self.tableData4=sdata.list;
	                          _self.pagedata=sdata;
	                      }
	                });
				},
				methods:{
					intelMerger(){
						this.dialogMerger=true;
					},
					Merger(){
						var _this=this;
						axios.post('/customer/intelMerger'
				        		//Qs.stringify({'ID':id,'ID2':id2},{arrayFormat: 'brackets'}) 
							//ajax请求成功的回调函数
							).then(function(v){
								console.log("回调成功，获取了服务器端返回的值v");
								console.log(v);
								_this.restaurants=v.data;
								_this.$notify({
				           	          title: '合并成功',
				           	          type: 'success',
				           	       	  duration:2000
				           	        });
								showAtRight('/customer/customerMerger');
							}).catch(function(){
								console.log("出错了！");
							});
					},
					/*客户分页*/
					handleCurrentChange(page){
						var _self=this;
						console.log("页数打印："+page);
		                $.ajax({
		                      type: "post",
		                      url: "/customer/customerPage2",
		                      data: {pageNum:page,pageSize:5},
		                      success: function (sdata) {
		                    	  console.log("页数打印*****："+sdata);
		                    	  _self.tableData4=sdata.list;
		                    	  _self.tableData3=sdata.list;
		                          _self.pagedata=sdata;
		                      }
		                });
		                this.dialogFormVisible=true;
					},
					//获取到表格的值
					handleCurrentChange2(row, event, column) {
			            this.$refs.table.toggleRowSelection(row);
			        },
			      //获取到表格的值
					handleCurrentChange02(row, event, column) {
			            this.$refs.table.toggleRowSelection(row);
			        },
			        selsChange(sels) {
			            this.sels = sels
			        },
			        selsChange02(sels02) {
			            this.sels02 = sels02
			        },
					//这里是加载对应客户的方法
				      loadAll() {
					   var _this=this;
					 	axios.get("/sales/abroadsaleCustName",
				           			{
				           		params: {
				           			custName:this.customer,
				          			    }
				           			}
				           			//ajax请求成功的回调函数
				          			).then(function(response){					          				
				           			console.log("回调成功，获取了服务器端返回的值v");
				           			console.log(response.data);
				           		_this.restaurants=response.data;
				           	}).catch(function(){
				           		alert("显示客户初始化数据出错了");
				           	});	//这个是数据的初始化
			          
					      },
				    //这里是加载对应客户的方法
				      loadAll2() {
					   var _this=this;
					   //AllpageNumber			   
					 	axios.get("/sales/abroadsaleCustName",
				           			{
				           		params: {
				           			custName:this.customer2
				          			    }
				           			}
				           			//ajax请求成功的回调函数
				          			).then(function(response){					          				
				           			console.log("回调成功，获取了服务器端返回的值v");
				           			console.log(response.data);
				           		_this.restaurants=response.data;
				           	}).catch(function(){
				           		alert("显示客户初始化数据出错了");
				           	});	//这个是数据的初始化
			          
					      },
					//这个是显示查询的数据
					 querySearchAsync(queryString, cb) {
					        var restaurants = this.restaurants;				       
					        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;	
					        clearTimeout(this.timeout);
					        this.timeout = setTimeout(() => { 
					       	cb(this.restaurants);
					       }, 3000 * Math.random());							       
					        console.log("queryString1:"+queryString.length);
					        if(queryString.length==0){					       
					        	this.customer=null;
					        	 this.loadAll();
						        var restaurants = this.restaurants;				       
						        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;	
						        clearTimeout(this.timeout);
						        this.timeout = setTimeout(() => {
						       ;
						       	cb(this.restaurants);
						       }, 3000* Math.random());	
					        }
					      },
					    //这个是显示查询的数据
						 querySearchAsync2(queryString, cb) {
						        var restaurants = this.restaurants;				       
						        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;	
						        clearTimeout(this.timeout);
						        this.timeout = setTimeout(() => { 
						       	cb(this.restaurants);
						       }, 3000 * Math.random());							       
						        console.log("queryString1:"+queryString.length);
						        if(queryString.length==0){					       
						        	this.customer2=null;//第二个客户
						        	 this.loadAll();
							        var restaurants = this.restaurants;				       
							        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;	
							        clearTimeout(this.timeout);
							        this.timeout = setTimeout(() => {
							       ;
							       	cb(this.restaurants);
							       }, 3000* Math.random());	
						        }
						      },
					    //这个是根据输入的内容筛选数据
					   createStateFilter(queryString) {
					    	  console.log("queryString2:"+queryString);
					    	  if(queryString!=null&&queryString!=" "){
					    		  this.customer=queryString;	
					    	  }else{
					    		  this.customer=null; 
					    	  }					    	 
					    	  console.log("customer:"+this.customer);
					    	this.loadAll();
					        return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};
					      },
					      //这个是根据输入的内容筛选数据
						   createStateFilter2(queryString) {
						    	  console.log("queryString2:"+queryString);
						    	  if(queryString!=null&&queryString!=" "){
						    		  this.customer2=queryString;//第二个客户
						    	  }else{
						    		  this.customer2=null; 
						    	  }					    	 
						    	  console.log("customer2:"+this.customer2);
						    	this.loadAll();
						        return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};
						      },
					   //从表格中带客户名称进来显示 (客户01)  
					   executionMerger(){
					    	  var _this=this;
					    	  //客户简称
					    	  var sname = this.sels.map(item => item.name).join();
					    	  //客户id
					    	  var cid=this.sels.map(item => item.ID).join();
					    	  console.log("客户ID："+cid);
					    	  _this.dialogFormVisible=false;
					    	  _this.customer=sname;
					      },
					    //从表格中带客户名称进来显示 (客户02)  
					   executionMerger02(){
					    	  var _this=this;
					    	  var sname2 = this.sels02.map(item => item.name).join();
					    	  var cid2=this.sels02.map(item => item.ID).join();
					    	  console.log("客户ID："+cid2);
					    	  _this.dialogFormVisible02=false;
					    	  _this.customer2=sname2;
					      },
				     //执行合并操作
				      merger(){
					    	var _this=this;
					    	var id=this.sels.map(item => item.ID).join();
					    	var id2=this.sels02.map(item => item.ID).join();
					    	axios.post('/customer/executionMerger',
					        		Qs.stringify({'ID':id,'ID2':id2},{arrayFormat: 'brackets'}) 
								//ajax请求成功的回调函数
								).then(function(v){
									console.log("回调成功，获取了服务器端返回的值v");
									console.log(v);
									_this.restaurants=v.data;
									_this.$notify({
					           	          title: '合并成功',
					           	          type: 'success',
					           	       	  duration:2000
					           	        });
								}).catch(function(){
									if(id==id2){
										_this.$notify({
						           	          title: '合并失败',
						           	          type: 'fail',
						           	       	  duration:2000
						           	        });
									}
									console.log("出错了！");
								});
					    	showAtRight('/customer/customerMerger');
				      },
				}
			  };
			var Ctor = Vue.extend(Main)
			new Ctor().$mount('#app')
		</script>
	</body>
</html>
